<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .car_tit,
        .car_footer {
            width: 800px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            list-style: none;
            border: 1px solid black;
            box-sizing: border-box;
            margin: 10px auto;
        }
        
        .car_cont {
            width: 800px;
            min-height: 100px;
            border: 1px solid black;
            box-sizing: border-box;
            margin: auto;
            list-style: none;
        }
        
        .car_cont li {
            display: flex;
            justify-content: space-between;
        }
        
        .car_tit li,
        .car_cont span,
        .car_footer li {
            width: 100px;
            height: 50px;
            padding: 10px;
            text-align: center;
            line-height: 30px;
            box-sizing: border-box;
        }
        
        .car_cont span {
            display: block;
        }
        
        span input {
            width: 80px;
        }
        
        .car_footer .pri {
            width: 25%;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="shopcar">
            <ul class="car_tit">
                <li>选中状态</li>
                <li>序号</li>
                <li>商品名</li>
                <li>图片</li>
                <li>单价</li>
                <li>数量</li>
                <li>总计</li>
                <li>操作</li>
            </ul>
            <ul class="car_cont">
                <li v-for="(item,index) in shops" :key="index">
                    <span><input type="checkbox" v-model="item.check"></span>
                    <span>{{index+1}}</span>
                    <span>{{item.shopname}}</span>
                    <span><img :src="images" alt="" width="30px" height="30px"></span>
                    <span>{{item.shopprice}}</span>
                    <span><input type="number" v-model="item.shopcount"></span>
                    <span>{{item.shopcount * item.shopprice}}</span>
                    <span><button @click="shops.splice(index,1)">删除</button></span>
                </li>
            </ul>
            <ul class="car_footer">
                <li><input type="checkbox" v-model="checkAll">全选</li>
                <li>总量：{{sum_all}}</li>
                <li class="pri">总计：{{All_pri}}</li>
                <li><button>结算</button></li>
                <li><button @click="check_remove">删除</button></li>
            </ul>

        </div>
    </div>
    <script>
        const vm = new Vue({
            data: {
                images: "../day01/images/1642131151272.jpg",
                shops: [{
                    shopname: '华为手机',
                    shopprice: 1999,
                    check: false,
                    shopcount: 10,
                }, {
                    shopname: '小米手机',
                    shopprice: 2999,
                    check: true,
                    shopcount: 10,
                }, {
                    shopname: '汉鼎鱼竿',
                    shopprice: 299,
                    check: true,
                    shopcount: 10,
                }, {
                    shopname: '达瓦鱼线',
                    shopprice: 19,
                    check: false,
                    shopcount: 10,
                }, {
                    shopname: '李宁韦德4',
                    shopprice: 399,
                    check: true,
                    shopcount: 10,
                }]
            },
            methods: {
                check_remove() {
                    this.shops = this.shops.filter((v) => {
                        return !v.check
                    })
                }
            },
            computed: {
                checkAll: {
                    get() {
                        let flag = true
                        this.shops.forEach((v) => {
                            if (!v.check) {
                                flag = false
                                return
                            }
                        })
                        return this.shops.length != 0 ? flag : false

                    },
                    set(value) {
                        this.shops.forEach((v) => {
                            v.check = value
                        })
                    }
                },
                sum_all() {
                    let sum = 0
                    this.shops.forEach((v) => {
                        if (v.check) {
                            sum += v.shopcount * 1
                        }
                    })
                    return sum
                },
                All_pri() {
                    let pri = 0
                    this.shops.forEach((v) => {
                        if (v.check) {
                            pri += v.shopcount * v.shopprice
                        }
                    })
                    return pri
                }
            }

        }).$mount(".app")
    </script>
</body>

</html>